<template>
    <div class="grrc-wrapper">
        <vue-calendar class="f-l" @cancel-special='cancelSpecial' :list="list" @choose-day="chooseDay"></vue-calendar>
        <task-list class="f-l" :list="taskList" @toggle='toggleTab' @finish='markComplete' @del='deleteEvent' @add-new="dialogVisible=true"></task-list>
        <el-dialog title="新建日程" size="tiny" class="dialog" width="600px" :visible.sync="dialogVisible">
            <el-form>
                <el-form-item label="时间：" label-width="60px">
                    <el-date-picker v-model="form.date" style="width:100%" type="datetime" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="内容：" label-width="60px">
                    <el-input v-model="form.content" type="textarea" :rows="4" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="hideDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import _ from 'lodash'
import vueCalendar from '../common/vueCalendar.vue'
import taskList from '../common/taskList.vue'
import {dateFormat} from '../../scripts/until'
// import Bus from '../../scripts/bus.js'

export default {
    name: 'tzgg',
    data: function() {	
        return {
            list: [],
            dialogVisible: false,
            form :{
                date:'',
                content:''
            },
            taskList: []
        }
    },
    components:{
        vueCalendar,
        taskList
    },
    methods: {
        hideDialog() {
            this.dialogVisible = false;
            this.form = {
                date:'',
                content:''
            }
        },
        toggleTab(val) {
            this.getList(val)
        },
        chooseDay(val){
            // console.log(val, this.list);
            this.taskList = _.filter(this.list, item=>{
                return item.date == val
            })
        },
        cancelSpecial(){
            this.taskList = this.list;
        },
        submitForm(){
            this.form.userid = localStorage.userid;
            this.form.state = '进行中';
            if(!(this.form.date && this.form.content)) {
                this.$message.error('日期和内容不能为空');
                return;
            }
            let newForm = _.clone(this.form);
            newForm.date = newForm.date.getTime()
            this.$$http('ADD_ONE_CAL', null, newForm).then(data=>{
                this.$message.success('添加日程成功');
                this.getList('进行中');
                this.hideDialog()
            })
        },
        deleteEvent(item) {
            // console.log(item)
            this.$confirm('确定删除？', '提示', {
                confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                this.$$http('DEL_ONE_CAL', item.calid).then(data=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList('进行中')
                })
            })
        },
        markComplete(item){
            this.$$http('EDIT_ONE_CAL', item.calid, {calid: item.calid, state:'已完成'}).then(data=>{
                this.$message.success('已完成')
                this.getList('进行中')
                
                // console.log(Bus)
            })
        },
        getList(type) {
            this.$$http('GET_ALL_CALS',[localStorage.userid, encodeURI(type)]).then(data=>{
                // let list = _.clone(data);
                // _.forEach(data, item=>{
                //     list.time = item.date
                // })
                this.list =  _.sortBy(data, item=>{
                    item.time = dateFormat(item.date, 'ymdhm')
                    return -item.date
                })
                this.$emitter.emit('cal-change');
                this.taskList = this.list;
                // console.log(this.list)
                // this.list = list;
                // console.log(data)

                // console.log(list, this.list)
                // console.log(this.list)
                // console.log(this.list)
            })
        }
    },
    mounted() {
        this.getList('进行中');
    }
}
</script>

<style lang="scss">
.grrc-wrapper{
    // border: 1px solid #ccc;
    height: 100%;
    overflow: auto;
    .tool-wrapper{
        height: 30px;
        background: #315FAC
    }
    .card-wrapper{
        cursor: pointer;
        .el-card__header{
            padding: 10px 12px;
        }
        .el-card__body{
            padding: 5px 10px;
        }
        .box-card {
            margin: 3px;
            box-shadow: none;
            width: 287px;
            // display: inline-block;
            float: left;
            transition: .4s ease;
            &:hover{
                box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
            }
        }
        .tool-card{
            height: 167px;
            .el-card__body{
                padding: 0;
            }
            .el-radio+.el-radio{
                margin-left: 5px;
            }
            // margin-left: -4px;
            .clearfix{
                height: 20px;
            }
            .tool-item{
                margin: 10px;
                font-size: 14px;
            }
        }
        .event-item{
            margin: 12px 0;
            font-size: 14px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .btn{
            .el-button--text{
                // color: #315FAC;
                font-size: 16px;
                transform: translateY(-3px)
            }
        }
    }
    .dialog{
        z-index: 3;
        .el-dialog__body{
            padding-bottom: 5px;
        }
        .el-form-item{
            margin-bottom: 10px;
        }
    }
}

</style>